<template>
    <div
        class="avatar"
        :style="{ width: width + 'px', height: width + 'px', 'border-radius': width / 2 + 'px' }"
    >
        <el-image
            v-if="userId"
            :style="{ width: width + 'px', height: width + 'px', 'border-radius': width / 2 + 'px' }"
            :src="proxy.globalInfo.avatarUrl + userId"
            fit="scale-down"
            loading="lazy"
            @click="goToUcenter"
        ></el-image>
        <div
            v-else
            class="no-login"
        >未登录</div>

    </div>
</template>

<script setup>
import { getCurrentInstance, nextTick } from 'vue';
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const router = useRouter();

const props = defineProps({
    userId: {
        type: String
    },
    width: {
        type: Number,
        default: 60
    },
    addLink: {
        type: Boolean,
        default: true
    }
})

const goToUcenter = () => {
    if (props.addLink) {
        router.push("/user/" + proxy.userId)
    }
}
</script>

<style lang="scss" scoped>
.avatar {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    .no-login {
        width: 100%;
        text-align: center;
        color: #909399;
        font-size: 13px;
    }
}
</style>
